<template>
  <div class="bg">
    <div class="title">定 时 点 设 置</div>
    <div class="main">
      <el-table :data="tableData" border style="width: 100%;height: 100%;background:rgb(220, 220, 220);">
        <el-table-column  type="index" label="序号" min-width="20">
        </el-table-column>
        <el-table-column prop="name" label="定时点名称" min-width="40">
        </el-table-column>
        <el-table-column prop="round" label="播放周期" min-width="40"> </el-table-column>
        <el-table-column prop="startDate" label="起始日期" >
        </el-table-column>
        <el-table-column prop="endDate" label="终止日期" >
        </el-table-column>
        <el-table-column prop="startTime" label="开始时间"> </el-table-column>
        <el-table-column prop="endTime" label="结束时间"> </el-table-column>
        <el-table-column prop="showSource" label="节目源"> </el-table-column>
      </el-table>
    </div>
    <div class="under">
      <div class="proposal">
        <div class="name">方 案 操 作</div>
        <div class="left">
          <button class="proposalButton">方案操作</button>
          <select id="proposal" v-model="selectedProposal">
            <option value="" disabled selected hidden>默认方案</option>
            <option
              v-for="(item, index) in proposals"
              :key="index"
              :value="item.id"
            >
              {{ item.name }}
            </option>
          </select> 
        </div>
      </div>
      <div class="setTime">
        <div class="name">定 时 操 作</div>
        <div class="content">
          <button v-for="(item, index) in buttonName" :key="index">
            {{ item }}
          </button>
        </div>
      </div>
      <div class="exec">
        <button class="execute">立即执行</button>
      </div>
      <div class="saveOrExit">
        <button class="save">保存</button>
        <button class="exit" @click="exit">退出</button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { useRouter } from "vue-router";
import { ref } from "vue";
const router = useRouter();
const selectedProposal = ref("");
const proposals = ref([
  {
    name: "fangany1",
    id: "1",
  },
  {
    name: "fangan2",
    id: "2",
  },
  {
    name: "fangany3",
    id: "3",
  },
  {
    name: "fangany4",
    id: "4",
  },
  {
    name: "fangany5",
    id: "5",
  },
]);
const tableData =
  ref([
    {
      number:'1',
      name:"mincheng",
      round:"播放周期",
      startDate: "2016-05-03",
      endDate: "2016-05-04",
      startTime: "1点",
      endTime:"2dian",
      showSource:"111"
    },
    {
      number:'2',
      name:"mincheng",
      round:"播放周期",
      startDate: "2016-05-03",
      endDate: "2016-05-04",
      startTime: "1点",
      endTime:"2dian",
      showSource:"111"
    },
    {
      number:'3',
      name:"mincheng",
      round:"播放周期",
      startDate: "2016-05-03",
      endDate: "2016-05-04",
      startTime: "1点",
      endTime:"2dian",
      showSource:"111"
    },
    {
      number:'4',
      name:"mincheng",
      round:"播放周期",
      startDate: "2016-05-03",
      endDate: "2016-05-04",
      startTime: "1点",
      endTime:"2dian",
      showSource:"111"
    },
    {
      number:'1',
      name:"mincheng",
      round:"播放周期",
      startDate: "2016-05-03",
      endDate: "2016-05-04",
      startTime: "1点",
      endTime:"2dian",
      showSource:"111"
    },
    {
      number:'2',
      name:"mincheng",
      round:"播放周期",
      startDate: "2016-05-03",
      endDate: "2016-05-04",
      startTime: "1点",
      endTime:"2dian",
      showSource:"111"
    },
    {
      number:'3',
      name:"mincheng",
      round:"播放周期",
      startDate: "2016-05-03",
      endDate: "2016-05-04",
      startTime: "1点",
      endTime:"2dian",
      showSource:"111"
    },
    {
      number:'4',
      name:"mincheng",
      round:"播放周期",
      startDate: "2016-05-03",
      endDate: "2016-05-04",
      startTime: "1点",
      endTime:"2dian",
      showSource:"111"
    },
   
    
  ]);
const buttonName = ref(["添加", "删除", "复制", "修改", "检索", "详细信息"]);
const exit = () => {
  router.go(-1);
};
</script>
<style lang="less" scoped>
@import url("./setTimePoint.less");
</style>